<template>
  <div class="page-container" >
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
        <el-breadcrumb-item>成长值规则列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="toolbar" style="padding-top: 30px">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" class="bigForm">
        <!--顶部搜索条件栏-->
        <el-form-item label="规则编号：" prop="growthNum" class="mb30 mr30" label-width="80px">
          <el-input
            v-model.trim="filters.growthNum"
            class="w178"
            placeholder="请输入规则编号"
            maxlength="80"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="规则名称：" prop="ruleName" class="mb30 mr30" label-width="80px">
          <el-input
            v-model.trim="filters.ruleName"
            class="w178"
            placeholder="请输入规则名称"
            maxlength="80"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="obtainMode" label="获取方式：" class="mb30 mr30" label-width="80px">
          <el-select
            v-model.trim="filters.obtainMode"
            class="w178"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in obtainModeList"
              :key="item.obtainMode"
              :label="item.obtainName"
              :value="item.obtainMode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status" class="mb30 mr30" label-width="80px">
          <el-select
            v-model.trim="filters.status"
            placeholder="全部"
            clearable
            class="w178"
          >
            <el-option label="启用" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-row class="times">
          <el-form-item style="margin-bottom:0 !important">
          <el-form-item label="创建时间：" prop="startTime" style="margin-right:0 !important">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                placeholder="开始时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="line">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                placeholder="结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>  
        </el-row>
        <!--顶部搜索条件按钮-->
        <div style="width:100%; text-align: right" class="search-button-noborder">
          <el-form-item>
            <kt-button :label="'搜索'" type="primary" @click="findPageClick" icon="el-icon-search" />
            <kt-button :label="$t('action.reset')" type="primary" :plain="true" @click="resetForm('filters')"/>
          </el-form-item>
          <el-form-item>
            <kt-button label="添加成长值规则" type="primary" @click="addGrowthRule"/>
          </el-form-item>
        </div>
        <!--表格+分页器-->
        <div style="width:100%">
          <!--表格-->
          <el-table
            :data="tableData"
            :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
            :highlight-current-row="true"
            :max-height="1500"
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column align="center" label="编号" element-loading-text width="200px">
              <template slot-scope="scope">
                <span>{{ scope.row.growthNum }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="规则名称" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.ruleName}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="获取方式" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.ruleType}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="成长值" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.giveGrowthVal}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="所属组织" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.deptName}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间 " width="250">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime}}</span>
              </template>
            </el-table-column>
            <el-table-column class-name="status-col"
              align="center"
              label="状态"
              width="200"
            >
              <div slot-scope="scope">
                <span v-if="scope.row.status == 0">启用</span>
                <span v-if="scope.row.status == 1">停用</span>
              </div>
            </el-table-column>

            <el-table-column
              class-name="status-col"
              align="center"
              fixed="right"
              label="操作"
              width="390"
              :render-header="renderHeader"
            >
              <template slot-scope="scope">
                <kt-button
                  @click="editGrowthRule(scope.row)"
                  type="text"
                  size="mini"
                  style
                  label="编辑"
                  :disabled="scope.row.status == 0"
                ></kt-button>
                <kt-button
                  @click="delGrowthRule(scope.row)"
                  type="text"
                  size="mini"
                  style
                  label="删除"
                  :disabled="scope.row.status == 0"
                ></kt-button>
                <kt-button
                  @click="growthRuleDetail(scope.row)"
                  type="text"
                  size="mini"
                  style
                  label="查看"
                ></kt-button>
                <kt-button
                    @click="updateStatus(scope.row ,'启用')"
                    type="primary"
                    size="mini"
                    style
                    label="启用"
                    v-if="scope.row.status == 1"
                  ></kt-button>
                  <kt-button
                    @click="updateStatus(scope.row , '停用')"
                    type="primary"
                    size="mini"
                    style
                    label="停用"
                    v-if="scope.row.status == 0"
                  ></kt-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="currentChange"
              :current-page="filters.start"
              :page-size="filters.limit"
              :total="totalSize"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="sizeChange"
            ></el-pagination>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { exportExcel } from "@/utils/excel";
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import {
  validatePhone,
  validateContacts,
  isEmail,
  isNumber
} from "@/utils/validate";
import XLSX from "xlsx";
export default {
  components: {
    CyTable,
    KtButton,
  },
  data() {
    return {
      loading:false,
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
      showStatus: null,
      ruleName: null,
      status: null,
      ruleType: null,
      obtainModeList: [
        {obtainMode :"1" ,obtainName:"下单赠送"},
        {obtainMode :"2" ,obtainName:"注册赠送"},
        {obtainMode :"3" ,obtainName:"评价赠送"},
        {obtainMode :"4" ,obtainName:"充值赠送"},
        {obtainMode :"5" ,obtainName:"分享赠送"},
        {obtainMode :"6" ,obtainName:"点赞赠送"},
        {obtainMode :"7",obtainName:"晒单赠送"},
        {obtainMode :"8" ,obtainName:"收藏赠送"},
      ],
      filters: {
        startTime: null,
        endTime: null,
        ruleNum: null,
        ruleName: null,
        deptId: null,
        shopping: null,
        start: 1,
        limit: 10,
      },
      totalSize: 0,
      tableData: [],
      size: "small",
      align: "center",

    };
  },
  methods: {
    // 表头添加移上去显示文案
    renderHeader(h, {column}) {
      const inReview = '提示：规则在启用状态时，不能编辑或删除'
      return h(
        'div', [
          h('span', column.label),
          h('el-tooltip', {
            effect: 'light',
            props: {
              placement: 'top'
            }
          }, [
            h('div', {
              slot: 'content',
              style: {
                'width': '240px',
                whiteSpace: 'normal',
                'margin-bottom': '5px'
              }
            }, inReview),
            h('i', {
              class: 'el-icon-warning',
              style: 'color: #ffbf5e;margin-left:5px;'
            })
          ],)
        ]
      )
    },
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.startTime) {
            return time.getTime() <= new Date(this_.filters.startTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        }
      };
    },
    //点击搜索，页码重置
    findPageClick(){
      this.filters.start = 1;
      this.queryPage();
    },
    //列表查询
    queryPage() {
      let _this = this;
      this.utils.request.getMemberGrowthRule(this.filters, function(res) {
        if (res.code == "0000") {
          _this.tableData = res.data.rows;
          _this.totalSize = res.data.total;
          _this.loading=false;
        }
      });
    },

    //重置条件
    resetForm(filters) {
      //需要校验的key
      let keys = [
        "growthNum",
        "ruleName",
        "obtainMode",
        "status",
        "startTime",
        "endTime"
      ];
      let boo = this.seachTableUtils.checkFromIsNull(this.filters, keys);
      if (!boo) {
        return;
      }
      let this_ = this;
      this.$refs.filters.resetFields();
      this_.queryPage();
    },

    //重置form表单
    resetRuleForm(formName) {
      this.$refs[formName].resetFields();
    },
    //添加成长值规则弹窗
    addGrowthRule() {
      this.$router.push({path: '/AddMemberGrowth/'})
    },
    //编辑成长值规则弹窗
    editGrowthRule(row) {
      this.$router.push({path:"/EditMemberGrowth", query:{id:row.id}});
    },
    //查看成长值规则弹窗
    growthRuleDetail(row) {
      this.$router.push({path:"/LookMemberGrowth", query:{id:row.id}});
    },
    //分页
    currentChange(start) {
      this.filters.start = start;
      this.queryPage();
    },
    sizeChange(limit) {
      this.filters.start = 1;
      this.filters.limit = limit;
      this.queryPage();
    },
    //修改规则状态
    updateStatus(row) {
      if (row.status == 0) {
        this.showStatus = "禁用";
      } else {
        this.showStatus = "启用";
      }
      this.$confirm("您确定要" + this.showStatus + "该规则吗?", "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          let this_ = this;
          let params = {};
          params.obtainMode = row.obtainMode;
          params.id = row.id;
          if (row.status == 1) {
            params.status = 0;
          } else {
            params.status = 1;
          }
          this_.utils.request.updateGrowthRuleStatus(params, function(res) {
            if (res.code == "0000") {
              this_.$message({
                message: this_.showStatus + "成功",
                type: "success"
              });
              this_.queryPage();
            } else if (res.code == "5555") {
              this_.$message({
                message: "该类型存在正在启用的规则，请先停用后再进行操作",
                type: "error"
              });
            } else {
              this_.$message({ message: "操作失败", type: "error" });
            }
          });
        })
        .catch(() => {});
    },
    //删除成长值规则
    delGrowthRule(row) {
      this.$confirm("您确定要删除该规则吗?", "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          let this_ = this;
          let params = {};
          params.obtainMode = row.obtainMode;
          params.id = row.id;
          this_.utils.request.delGrowthRule(params, function(res) {
            if (res.code == "0000") {
              this_.$message({ message: "删除成功 ", type: "success" });
              this_.queryPage();
            } else {
              this_.$message({ message: "删除失败 ", type: "error" });
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.queryPage();
  }
};
</script>
<style scoped lang="scss">
.type {
  display: flex;
  align-items: center;
}
.mb200 {
  padding-top: 10px;
}
.colorE7 {
  color: #ffbf5e !important;
}
.pl127 {
  padding-left: 80px !important;
}
.type p {
  text-align: right;
  margin-right: 20px;
  width: 120px;
}
.newUserRegister {
  width: 20%;
  margin-left: 2%;
}
.newUserOrder {
  margin-top: 2%;
  width: 20%;
  margin-left: 2%;
}
.font {
  font-size: 18px;
  font-weight: 800;
}
.ruleDes {
  color: #ffdead;
  font-size: 20px;
}
.positionDes {
  text-align: center;
  margin-top: 2%;
}
.ruleClass {
  font-size: 30px;
}
.everyCostHandleSel {
  /deep/ .el-input {
    width: 20%;
  }
}
.w178 {
  width: 178px;
}
.w200 {
  width: 200px;
}
.editTips {
  span {
    display: inline-block;
    margin-bottom: 6px;
  }
}
/deep/ .w290 {
  width: 290px !important;
  /deep/ .el-input__inner {
    width: 290px;
  }
}

.times-to {
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  color: #999;
  display: inline-block;
}
.mr30 {
  margin-right: 30px;
}
.w140 {
  width: 140px;
}

form {
  /deep/ .newUserRegister {
    margin-left: 0px;
    margin-right: 5px;
  }
}

.mb18 {
  margin-bottom: 18px;
}

.mt18 {
  margin-top: 18px;
}

// dialog标题的样式问题
.span-title {
  font-size: 28px;
  color: #333333;
}
//下拉选择框icon对齐
.iconAlignment {
  /deep/ .el-input__icon {
    line-height: 32px !important;
  }
}
.mb120 {
  margin-bottom: 120px !important;
}
.mr60 {
  margin-right: 60px !important;
}
/deep/ .w138 {
  width: 138px !important;
  /deep/ .el-input__inner {
    width: 138px !important;
  }
}
/deep/ .w356 {
  width: 340px !important;
  /deep/ .el-input__inner {
    width: 340px !important;
  }
}
.textRed {
  color: red !important;
}
.noMarginL {
  margin-left: 0 !important;
}
.w70 {
  display: inline-block;
  width: 70px !important;
}
.colorOrange {
  color: #e7aa4e !important;
}
.turnInlineBlock {
  display: inline-block !important;
}
.successImg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.errorInfoPosition {
  /deep/ .el-form-item__error {
    left: 80px;
  }
}

/deep/ .w115 {
  display: inline-block;
  width: 110px;
  text-align: right;
}
.el-dialog-style {
  /deep/ .el-dialog {
    width: 610px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    /deep/ .el-dialog__body {
      padding: 40px 0 0 0;
    }
  }
}

.mb40 {
  margin-bottom: 40px;
}
.labelText {
  color: #333333;
  font-size: 16px;
}
.w125 {
  display: inline-block;
  width: 125px;
  text-align: right;
}
.w90 {
  display: inline-block;
  width: 90px;
  text-align: right;
}
.w92 {
  display: inline-block;
  width: 92px;
  text-align: right;
}
.w296 {
  width: 296px !important;
  /deep/ .el-input__inner {
    width: 296px;
  }
}

/deep/ .editDialogInput125 {
  width: 125px !important;
  /deep/ .el-input__inner {
    width: 125px !important;
  }
}
/deep/ .editDialogInput78 {
  width: 78px !important;
  /deep/ .el-input__inner {
    width: 78px !important;
  }
}
/deep/ .w275 {
  width: 275px !important;
  /deep/ .el-input__inner {
    width: 275px !important;
  }
}
.color000 {
  color: #000000;
}
.color333 {
  color: #333333;
}
.color666 {
  color: #666666;
}
/deep/ .inputInner_paddingRight16 {
  /deep/ .el-input__inner {
    padding-right: 16px !important;
  }
}
/deep/ .el-dialog {
  padding: 35px 60px 60px;
}
/deep/ .el-dialog__header {
  padding: 0;
  margin-bottom: 15px;
  /deep/ .el-dialog__title {
    font-size: 18px;
    color: #333333;
  }
}
/deep/ .el-dialog__body {
  padding: 0 !important;
  /deep/ .el-tabs__header {
    margin-bottom: 40px !important;
  }
  /deep/ .el-tabs__item.is-disabled {
    color: #999999;
    font-size: 16px;
  }
  /deep/ .el-tabs__item {
    padding: 0 30px;
  }
  /deep/ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 0;
  }
  /deep/ .el-tabs__active-bar {
    height: 4px;
    color: #409eff;
    border-radius: 2px;
  }
  /deep/ .el-tabs__nav-wrap::after {
    height: 1px;
  }
}
.tabs {
  /deep/ .el-tabs__header {
    margin-bottom: 40px !important;
  }
  /deep/ .el-tabs__item.is-disabled {
    color: #999999;
    font-size: 16px;
  }
  /deep/ .el-tabs__item {
    padding: 0 30px;
  }
  /deep/ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 0;
  }
  /deep/ .el-tabs__active-bar {
    height: 4px;
    color: #409eff;
    border-radius: 2px;
  }
  /deep/ .el-tabs__nav-wrap::after {
    height: 1px;
  }
}
/deep/ .width326 {
  width: 326px !important;
  /deep/ .el-input__inner {
    width: 326px !important;
  }
}
/*! autoprefixer: off */
.w326 {
  /deep/ .el-input {
    width: 326px !important;
    /deep/ .el-input__inner {
      width: 326px !important;
    }
  }
}
</style>
